<template>
	<div class="series">
		<x-header :left-options="{backText: ''}" @on-click-back="isSideBarShow = false">标准报价</x-header>
		<scroll class="wrapper" :data="truckList" :pullup="true" @scrollToEnd="loadData" :style="{height:scrollHeight}">
			<div class="list">
				<div @click="jump($event,item.id)" class="list-item flex" v-for="(item, index) in truckList" :key="index">
					<img :src="item.logo" class="car-image  mr10">
					<div class="flex-item">
						<p class="typo_black0 fs12">{{item.name}}</p>
						<p class="c_999 fs10 lh18">{{item.tags}}</p>
						<span data-type="1" class="ask_button fr fs12">询底价</span>
					</div>
				</div>
			</div>
			<load-more :tip="tip" :show-loading="!allLoaded"></load-more>
		</scroll>
	</div>
</template>

<script>
	import { XHeader } from 'vux'
	import { mapActions, mapGetters } from 'vuex'
	import scroll from '@/base/scrollView'
	import { LoadMore } from 'vux'
	export default {
		components:{
			XHeader,
			scroll,
			LoadMore
		},
		data () {
			return {
				page: 1,
				pulldown: true,
				listenScroll: true,
				truckList: [],
				allLoaded:false,
				scrollHeight:'',
				tip:'加载更多...'
			}
		},
		computed:{
		},
		methods:{
			...mapActions('screen',[
				'getTruckList'
			]),
			jump (e,id) {			
				var type = e.target.dataset.type;
				if(type) {
					this.$router.push({path:'/ask/askprice',query:{id}})
				}else {
					this.$router.push({path:'/detail/descript',query:{id}})
				}
			},
			loadData () {
				let tagid = this.$route.query.tagid
				this.page++
				this.getTruckList({tagid, page: this.page, rows: 10}).then(data => {
					this.truckList = this.truckList.concat(data)
					if(data.length < 10) {
						this.allLoaded = true
						this.tip = '没有更多啦~'
					}
				})
			}
		},
		created() {
			this.loadData()
		},
		mounted() {
			this.scrollHeight = document.body.clientHeight - 46 + 'px'
		}
	}
</script>

<style lang = 'scss' scoped>
	.list-item {
		height: 2.13333rem;
		border-bottom: 1px solid #f5f5f5;
		justify-content: center;
		align-items: center;
		padding-right: 0.26667rem;
		padding-left: 0.26667rem;
		background-color: #fff;
	}
	.ask_button {
		
		color: #f89f41;
		border-color: #f89f41;
	}
</style>